<template>
	<div>
		<div class="rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px mt-15px">
			<div class="text-18px mb-10px">
				<span class="text-#07B175">买入</span>
				<span class="text-#20232A">USDT</span>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">法币金额</p>
				<div class="flex items-center">
					<p class="text-#07B175 text-bold">￥100.00</p>
				</div>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">价格</p>
				<p class="text-#000000 text-bold">￥ 6.96</p>
			</div>
			<div class="flex items-center justify-between">
				<p class="text-#86909C">接收数量</p>
				<p class="text-#000000 text-bold">100.00 USDT</p>
			</div>
		</div>
		<div class=" rounded-10px border-1px border-#E5E6EB border-solid p-20px w-600px mt-15px">
			<div class="text-18px text-#000000 mb-10px">支付方式</div>
			<div class="text-14px text-#86909C flex items-center mb-10px justify-between">
				<div>
					付款方式
				</div>
				<div class="flex items-center">
					<p class="w-4px h-14px" :style="{ backgroundColor: payMethod.color }"></p>
					<p class="text-14px text-#000000 ml-10px">{{ payMethod.name }}</p>
				</div>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">性格</p>
				<div class="flex items-center">
					<p>夏天</p>
					<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
				</div>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">支付宝账号</p>
				<div class="flex items-center">
					<p>夏天</p>
					<img src="/transaction/c2c/orderDetail/copy.svg" alt="" class="ml-10px w-16px h-16px">
				</div>
			</div>
			<div class="flex items-center justify-between mb-10px">
				<p class="text-#86909C">收款二维码</p>
				<el-select placeholder="查看二维码" style="width: 120px;" popper-class="order-detail-qrcode-select"
					>
					<el-option  value="1">
						<template #default>
							<div class="flex items-center justify-center">
								<img src="/header/code2d.svg" class="w-160px h-160px">
							</div>
						</template>
					</el-option>
				</el-select>
			</div>
		</div>
		<div class="mt-50px">
			<el-button type="primary" color="#ECECF0"
				style="width:200px;height:50px;font-size: 18px;margin-right: 20px;color:#86909C;" @click="cancel">
				取消订单
			</el-button>
			<el-button type="primary" color="#ECECF0" v-if="countDown > 0"
				style="width:320px;height:50px;font-size: 18px;color:#86909C;">
				{{ timeShow }}后可联系客服
			</el-button>
			<el-button type="primary" color="#114CEE" style="width:320px;height:50px;font-size: 18px;" v-else
				@click="finish">
				联系客服
			</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
const payMethod = ref<any>({
	color: '#01A9F2',
	name: '支付宝'
});

const emits = defineEmits(['cancel', 'finish']);

const cancel = () => {
	emits('cancel');
};

const finish = () => {
	emits('finish');
};
// 倒计时
const countDown = ref(10);

// 分钟：秒格式
const timeShow = computed(() => {
	let minutes: any = Math.floor(countDown.value / 60);
	if (minutes < 10) {
		minutes = `0${minutes}`;
	}
	let seconds: any = countDown.value % 60;
	if (seconds < 10) {
		seconds = `0${seconds}`;
	}
	return `${minutes}:${seconds}`;
});
function countDownFn() {
	const timer = setInterval(() => {
		countDown.value--;
		if (countDown.value <= 0) {
			clearInterval(timer);
		}
	}, 1000);
}

onMounted(() => {
	countDownFn();
});

</script>
<style lang="scss" scoped>
::v-deep .el-select__placeholder.is-transparent {
	color: #114CEE;
}

::v-deep .el-select__wrapper {
	border: none !important;
	box-shadow: none !important;
	padding: 0;
}
</style>
